<template>
  <div class="information-container">
      <el-card class="box-card">
        <div class="search">
          <div class="item">
              <span style="margin-right:5px;">发送者用户名</span>
              <el-input 
                  style="width: 300px"
                  v-model="query.sendUserName"
                  clearable 
                  @clear="getImformationList"></el-input>
          </div>
          <el-button type="primary" class="searchBtn btn" icon="el-icon-search" @click="getImformationList">查询</el-button>
          <el-button type="primary" class="addBtn btn" icon="el-icon-position" @click="sendMsg">发送消息</el-button>
        </div>
        <div class="table">
           <el-table 
              width="100%"
              :data="informationList"
              stripe border>
              <el-table-column prop="id" label="Id"  width="100" />
              <el-table-column prop="title" label="标题"/>
              <el-table-column prop="content" label="内容" />
              <el-table-column prop="sendUserName" label="发送人"  width="100" />
              <el-table-column prop="receives" label="接收人"  />
              <el-table-column prop="readCount" label="已读数" width="70" />
              <el-table-column prop="receiveUserCount" label="接收人数" width="100" />
              <el-table-column  label="创建时间" width="160px">
                <template slot-scope="scope">
                      {{scope.row.createTime | dateFormat}}
                </template>
              </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="pagination"
                :current-page="query.pageIndex"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
          </el-pagination>
        </div>
      </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //查询参数
      query:{
        pageIndex: 1,
        pageSize: 5,
        sendUserName: null
      },
      //消息列表
      informationList:[],
      //总数
      total: 0
    }
  },
  created(){
    this.getImformationList();
  },
  methods:{
    //消息列表
    getImformationList(){
      this.getRequest("/api/admin/message/page",{
        pageIndex: this.query.pageIndex,
        pageSize: this.query.pageSize,
        sendUserName: this.query.sendUserName
      }).then( resp => {
        if(resp){
          this.informationList = resp.data;
          this.total = resp.total;
        }
      })
    },
     //监听pagesize改变的事件
    handleSizeChange(newSize) {
      
        //console.log(newSize);
        this.query.pageSize = newSize
        this.getImformationList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
        //console.log(newPage);
        this.query.pageIndex = newPage
        this.getImformationList();
    },
    sendMsg(){
      //发送消息
      this.$router.replace("/admin/information/send");
    }
  }
}
</script>

<style lang="scss" scoped>
.information-container{
  font-family: "华文楷体";
  .box-card{
      border-radius: 10px;
      color:#1A1A1A;
      .search{
        margin-top: 10px;
        display: flex;
        align-items: center;
        color:#1A1A1A;
        font-family: "黑体";
        .searchInput{
          margin-left: 10px;
          border:1px solid #1980FF;
          border-radius: 4px;
        }
        .btn{
          margin: 0 0 0 20px;
          font-family: "华文楷体";
        }
    }
    .table{
         margin-top: 20px;
         width: 100%;
         //内容居中
         /deep/.el-table th > .cell {
              text-align: center;
          }
          
          /deep/.el-table .cell {
              text-align: center;
          } 
          .btns{
            display: flex;
            justify-content: space-around;
          }
          .btn{
            border: none;
            font-size: 12px;
            margin:0 10px;
            padding: 0;
            cursor: pointer;
            &:nth-child(1){
              color:#1980FF;
            }
             &:nth-child(2){
              color:#F56C6C;
            }
          }
      }
      .pagination{
        margin: 20px 0 0 0;
        display: flex;
        justify-content: flex-end;
      }
  }
}
</style>